<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* li{width: 10px;
            height: 20px !important;
        } */
    </style>
</head>
<body>
    <div style="left: 10px;margin-left: auto;position: relative;">hello</div>
    <button>点击右移</button>
    <script>

// // return 返回值小案例
// var odiv = document.querySelector("div")
// var btn = document.querySelector("button")
// function fn(odiv){
//     return odiv.style.left
// }
// btn.onclick = function(){
//     console.log(fn(odiv))
//     odiv.style.left = parseInt(fn(odiv)) + 10 + 'px'
//     console.log( odiv.style.left)
// }

    // 自调用小案例(递归)
    // 自调用函数也叫递归函数
    // 用递归做一个 5的阶级乘法
    // function fn(n) {
    //    if(n<=1) {
    //     return n
    //    }
    //    return n*fn(n-1)
    // }
    // console.log(fn(5))
        //普通函数自调用
    // function fnc(){
    //     console.log('普通函数');
    //     console.log(this);//window
    // }    //加括号表示自调用
    // fnc()

    // var a = 10;
    // var b = 10;
    // var c = 10;
    // var d = 10;

    // // 形参与实参
    // // 当有形参没实参时
    // var fn1 = function(a){
    //     console.log("hello")
    //     console.log(a)   // undefined
    // } 
    // fn1()

    // // 有实参没有形参时
    // var fn2 = function(){
	// console.log("hello")
    // console.log(a)
    // } 
    // fn2(a)

    // // 形参多于实参时 
    // var fn3 = function(a,b){
	// console.log("hello")
    // console.log(a)
    // console.log(b)    // undefined
    // } 
    // fn3(a)

    // // 实参多于形参时
    // var fn = function(a,b){
	// console.log("hello")
    // console.log(a)
    // console.log(b)
    // } 
    // fn(a,b,c)

    // 存储所有实参 arguments 
        // function fn(){
        //     var a = 0   // 这里如果是字符串  输出会变成字符串拼接
        //     console.log(arguments)    
        // for (var i = 0;i<arguments.length;i++) {
        //     a+= arguments[i]   // 输出实参 [1,2,3,4,'5']   只会输出该函数内部的实参
        // }

        // console.log(a)   // 如果实参里有字符串 会在运算完数字 后变成字符串拼接

        // }
        // fn(1,2,3,4,'5')
        // function fn1(){
        //     console.log(arguments)    
        // }
        // fn1('a',23,42)


        // // 如果没有使用return,默认返回undefined
        // function fn(){
        //     var a = 10
        // }
        // console.log(fn())    // undefined

        // // return一次只能返回一个值
        // function fn1(){
        //     var a = 10
        //     return a
        // }
        // console.log(fn1())     // 10

        // // 函数执行时遇到return 会停止执行
        // function fn2(){
        //     var a = 10
        //     return a
        //     console.log(a)      // 不会执行
        // }
        // console.log(fn2())    // 10

        // // 如果return想返回多个数值,可以使用对象或数组形式传递
        // function fn3(){
        //     var a = 10
        //     var b = 20
        //     // 对象传递写法
        //     // return {             // {10,20}
        //     //     a,b
        //     // }

        //     // 数组传递写法
        //     return [
        //         a,b
        //     ]
        //     console.log(a)      //  [10, 20]
        // }
        // console.log(fn3())   

        // // 如果不用数组或对象传递多个数值,后面写的会覆盖前面写的
        // function fn4(){
        //     var a = 10
        //     var b = 20
        //     return a,b
        //     console.log(a)
        // }
        // console.log(fn4())          // 只会输出b 20


        // // 对象传递方式简写
        // function fn3(){
        //     var a = 10
        //     var b = 20
        // //    return {      // {10,20}
        // //         a:a,
        // //         b:b
        // //     }
        //     return {    // {10,20}
        //         a,b
        //     }
        //     console.log(a)      //  [10, 20]
        // }
        // console.log(fn3()) 

    </script>
    
</body>
</html>